/*
 * @Author: 李九阳
 * @Date: 2021-12-13 20:23:26
 * @LastEditors: 李九阳
 * @LastEditTime: 2021-12-14 10:17:51
 */
// 背景：开发中遇到的表单输入，往往会有对输入内容的限制，比如不能输入表情和特殊字符，只能输入数字或字母等。

// 我们常规方法是在每一个表单的 on-change 事件上做处理。

// 这样代码量比较大而且不好维护，所以我们需要自定义一个指令来解决这问题。

// 需求：根据正则表达式，设计自定义处理表单输入规则的指令，下面以禁止输入表情和特殊字符为例。
import { App } from "vue";
const findEle = (parent: any, type: any) => {
  return parent.tagName.toLowerCase() === type
    ? parent
    : parent.querySelector(type);
};

const trigger = (el: any, type: any) => {
  const e = document.createEvent("HTMLEvents");
  e.initEvent(type, true, true);
  el.dispatchEvent(e);
};

export default (app: App<Element>) => {
  app.directive("emoji", {
    beforeMount: function (el: any, binding: any, vnode: any) {
      // 正则规则可根据需求自定义
      const regRule =
        /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g;
      const $inp = findEle(el, "input");
      el.$inp = $inp;
      $inp.handle = function () {
        const val = $inp.value;
        $inp.value = val.replace(regRule, "");

        trigger($inp, "input");
      };
      $inp.addEventListener("keyup", $inp.handle);
    },
    unmounted: function (el: any) {
      el.$inp.removeEventListener("keyup", el.$inp.handle);
    },
  });
};
